import React from 'react';
import './index.css'
import MyIconFont from "../../../components/MyIconFont";
import {useNavigate} from "react-router-dom";
import {Icon} from "@alifd/next";

const ProjectCard = (props) => {
    const {projectId,projectName,projectDescription,icon} = props;
    const navigate = useNavigate();
    return (
        <div className="ProjectCard_box" onClick={()=> {
            navigate(`/projectConfig/${projectId}/setting`)}}>
            <div className="ProjectCard_box_header">
                <span className="ProjectCard_box_header_projectName">{projectName}</span>
                <div className="ProjectCard_box_header_iconBoeder">
                    <MyIconFont type={JSON.parse(icon).iconType}
                              color={JSON.parse(icon).iconColor} size={"xl"}/>
                </div>
            </div>
            <p className="ProjectCard_box_description">{projectDescription || "暂无描述。。。"}</p>
            <div className="ProjectCard_box_footer">
                <span className="ProjectCard_box_footer_type_true">启用中</span>
                {/*<span className="ProjectCard_box_footer_type_false">已停用</span>*/}
                <Icon type="search" size={"small"} className="ProjectCard_box_more_button" id="viewButton"/>
                <Icon type="ashbin" size={"small"} className="ProjectCard_box_more_button" id="deleteButton"/>
            </div>
        </div>
    );
};

export default ProjectCard;